
const formCollection = {
  // 单选框
  elRadio: {
    template: `<el-radio-group v-model="val" @change="changeFater">
    <el-radio v-for="item in data" :key="item.value" :label="item.value" :disabled="item.disabled">{{item.label}}</el-radio>
  </el-radio-group>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '', // 父子间传递数据
      data: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 复选框
  elCheckbox: {
    template: `<el-checkbox-group v-model="val" @change="changeFater">
    <el-checkbox v-for="item in data" :key="item.value" :label="item.value" :disabled="item.disabled">{{item.label}}</el-checkbox>
  </el-checkbox-group>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '', // 父子间传递数据
      data: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 普通输入框
  elInput: {
    template: `<el-input v-model="val" placeholder="请输入内容" size="small" @change="changeFater"></el-input>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '' // 父子间传递数据
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 数字输入框
  elNumberInput: {
    template: `<el-input v-model="val" type="number" placeholder="请输入内容" size="small" @change="changeFater"></el-input>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '' // 父子间传递数据
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 下拉单选
  elSelect: {
    template: `<el-select v-model="val" placeholder="请选择" @change="changeFater" size="small" filterable clearable>
                <el-option
                  v-for="item in data"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '', // 父子间传递数据
      data: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 下拉多选
  elMultipleSelect: {
    template: `<el-select
                size="small"
                v-model="val"
                multiple
                filterable
                collapse-tags
                style="margin-left: 20px;"
                @change="changeFater"
                placeholder="请选择">
                <el-option
                  v-for="item in data"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '', // 父子间传递数据,
      data: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 级联选择器
  elCascader: {
    template: `<el-cascader
                expand-trigger="hover"
                :options="data"
                size="small"
                v-model="val"
                @change="changeFater">
              </el-cascader>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '', // 父子间传递数据,
      data: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 大文本框框
  elTextarea: {
    template: `<el-input
                type="textarea"
                :rows="rows"
                placeholder="请输入内容"
                @change="changeFater"
                v-model="val">
              </el-input>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '', // 父子间传递数据,
      data: {
        type: Array,
        default: function () {
          return []
        }
      },
      rows: {
        type: String,
        default: 1
      }
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 链接地址
  elUrlInput: {
    template: `<el-input placeholder="请输入内容" v-model="val" @change="changeFater" size="small">
    <template slot="prepend">http://</template>
  </el-input>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '', // 父子间传递数据,
      data: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', 'http://' + this.val)
      }
    }
  },
  // 时间
  elTime: {
    template: `<el-time-picker
                v-model="val"
                size="small"
                @change="changeFater"
                placeholder="任意时间点">
              </el-time-picker>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '' // 父子间传递数据
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 日期
  elDate: {
    template: `<el-date-picker
              v-model="val"
              type="date"
              size="small"
              @change="changeFater"
              placeholder="选择日期">
            </el-date-picker>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '' // 父子间传递数据
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 时间日期
  elDateTime: {
    template: `<el-date-picker
    v-model="val"
    type="datetime"
    size="small"
    @change="changeFater"
    placeholder="选择日期时间">
  </el-date-picker>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '' // 父子间传递数据,
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 时间日期范围
  elDateTimeRange: {
    template: `<el-date-picker
                v-model="val"
                size="small"
                @change="changeFater"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '' // 父子间传递数据,
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 时间范围
  elTimeRange: {
    template: `<el-time-picker
                is-range
                v-model="val"
                size="small"
                @change="changeFater"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '' // 父子间传递数据,
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 周
  elTimeWeek: {
    template: `<el-date-picker
                v-model="val"
                type="week"
                size="small"
                @change="changeFater"
                format="yyyy 第 WW 周"
                placeholder="选择周">
              </el-date-picker>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '' // 父子间传递数据,
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 年
  elTimeYear: {
    template: `<el-date-picker
              v-model="val"
              size="small"
              type="year"
              @change="changeFater"
              placeholder="选择年">
            </el-date-picker>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '' // 父子间传递数据,
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 月
  elTimeMonth: {
    template: `<el-date-picker
              v-model="val"
              type="month"
              size="small"
              @change="changeFater"
              placeholder="选择月">
            </el-date-picker>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '' // 父子间传递数据,
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 多个日期
  elTimeDates: {
    template: `<el-date-picker
              v-model="val"
              type="dates"
              size="small"
              @change="changeFater"
              placeholder="选择一个或多个日期">
            </el-date-picker>`,
    data () {
      return {
        val: this.msg
      }
    },
    props: {
      msg: '' // 父子间传递数据,
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater () {
        this.$emit('msgEvent', this.val)
      }
    }
  },
  // 富文本
  quillEditor: {
    template: `<quill-editor :content="val"
                :options="editorOption"
                @change="changeFater($event)">
            </quill-editor>`,
    data () {
      return {
        val: this.msg,
        editorOption: {}
      }
    },
    props: {
      msg: '' // 父子间传递数据
    },
    model: {
      prop: 'msg', // 父子间传递数据的属性名称
      event: 'msgEvent'// 定义传递数据到父组件的事件名称
    },
    methods: {
      changeFater (event) {
        this.val = event.html
        this.$emit('msgEvent', event.html)
      }
    }
  }
}

const list = {}
for (let component in formCollection) {
  list[component] = component
}

export {
  formCollection,
  list
}
